<template>
    <div class="label-container">
        <div class="head-sub">
            <headersubaction :name='name1' :action='action1'></headersubaction>
        </div>
        <div class="mui-scroll-wrapper mui-content">
            <div class="mui-scroll">
                <div>
                    <p class="newtext">所有标签</p>
                    <ul class="mui-table-view label-history">
                        <li class="mui-table-view-cell mui-media new-li-text" v-if='!labelInfo.length'>
                            暂时没有标签
                        </li>
                        <li class="mui-table-view-cell mui-media new-li-text"
                        v-else
                        v-for="(item, index) in labelInfo"
                        :key='index'
                        :data-labelid='item.id'
                        >
                            <div class="mui-media-body label-name">
                                {{item.name}}({{item.labelArr.length}})
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headersubaction from '../public/header/HeaderSubAction'
import {mapState} from 'vuex'
  export default {
      data() {
          return {
              // 标签
              name1: this.$route.query.name,
              // 新建
              action: this.$route.query.action,
              action1: 'labelHead'
          }
      },
      components: {
          headersubaction
      },
      mounted() {
         this.init()
         console.log(this.labelInfo)
      },
      computed: {
          ...mapState(['labelInfo'])
      },
      methods: {
          init() {
              var self = this
              self.$immui.init({
                  // 滑动回弹
                swipeBack: false,
                // 手势事件设置
                gestureConfig: {
                    // 单击
                    tap: true,
                    // 长按
                    longtap: true,
                    // 滑动
                    swipe: true
                }
              })
                // mui滚动函数
            self.$immui('.mui-scroll-wrapper').scroll()
            self.$immui('.label-container').on('tap', '.new-li-text', function(e) {
                console.log('点击跳转到标签的详细信息', this.getAttribute('data-labelid'))
            })
          }
      }
  }
</script>
<style lang='scss' scoped>
.label-container {
    z-index: 12;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
}
.mui-scroll-wrapper{
    top: 46px;
}
.head-sub {
    height: 44px;
    position: relative;
}
.new-li-text{
    position: relative;
    top: 0;
    left: 0;
}
.newtext{
    line-height: 40px;
    margin-bottom: 0;
    padding-left: 4px;
}
.label-name{
    line-height: 42px;
}
</style>
